<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            perspective: 1400px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .phone{
            width: 300px;
            height: 437px;
            display: block;
            margin: 50px auto;
            background:url("img/phone.jpg") 0px 0px/300px 437px no-repeat;
            -webkit-box-shadow: -15px 20px 25px black;
            box-shadow: -15px 20px 25px black;
            -webkit-transform: rotateX(60deg) rotateY(5deg) rotateZ(-20deg);
            -moz-transform: rotateX(60deg) rotateY(5deg) rotateZ(-20deg);
            -ms-transform: rotateX(60deg) rotateY(5deg) rotateZ(-20deg);
            -o-transform: rotateX(60deg) rotateY(5deg) rotateZ(-20deg);
            transform: rotateX(60deg) rotateY(5deg) rotateZ(-20deg);
            -webkit-transform-origin: 50% 50% 100px;
            -moz-transform-origin: 50% 50% 100px;
            -ms-transform-origin: 50% 50% 100px;
            -o-transform-origin: 50% 50% 100px;
            transform-origin: 50% 50% 100px;
            transition:all 1s ease-out;
        }
        .phone:hover{
            -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -webkit-box-shadow: -100px 50px 25px #fff;
            box-shadow: -100px 50px 25px #fff;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" class="phone"></a>
    </div>
</body>
</html>